<script setup lang="ts">
import AuthBar from '@/components/authBar/index.vue';
import { buildAssetSource } from '@/utils';
import Steps from './components/steps.vue';
</script>

<template>
  <view class="print-result flex-col">
    <Steps :current="4" />
    <AuthBar back-home />

    <view class="flex-center flex-1 overflow-auto">
      <view class="mx-126">
        <view class="flex-col items-center">
          <view class="print-result__cover">
            <image :src="buildAssetSource('dui.png')" class="h-134 w-134" />
          </view>
          <view class="print-result__title mt-20">
            打印完成
          </view>
          <view class="print-result__desc mt-23">
            您的报告已打印完成，请妥善保管报告
          </view>
        </view>

        <view class="page-tips mt-68">
          <view class="tips-title">
            <wd-icon name="help-circle" size="32px" /> 操作提示
          </view>
          <view class="tips-content">
            <view>
              1.如血液、影像、心电图等，并根据需求进行选择和预约
            </view>
            <view class="mt-10">
              2.可以选择不同体检套餐，根据个人需求选择合适的套餐
            </view>
            <view class="mt-10">
              3.可以查看已预约的检查项目、时间、地点等信息
            </view>
          </view>
        </view>

        <view class="success-action flex justify-center">
          <view class="success-action__btn">
            <wd-button block>
              返回首页
            </wd-button>
          </view>
          <view class="success-action__btn ml-30">
            <wd-button block>
              继续打印
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '打印结果',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.print-result {
  height: 100%;
  background-color: var(--bg-color);

  .print-result__cover {
    @apply flex-center;
    width: 220px;
    height: 220px;
    background: #e5efff;
    border-radius: 50%;
  }

  .print-result__title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);
  }

  .print-result__desc {
    font-size: 28px;
    color: var(--secondary-text-color);
  }

  .page-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 0 38px 31px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }

  .success-action {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;

    .success-action__btn {
      width: 370px;
      :deep(.wd-button) {
        font-weight: bold;
      }
    }
  }
}
</style>
